<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery实现点击“+”“-”加减号改变文本框数值_网页代码站(www.webdm.cn)</title>
<script src="http://www.webdm.cn/themes/script/jquery.js"></script>
<style>
/*demo css*/
.i_tips{height:30px;margin-left:20px;color:#f60;font-size:14px;line-height:30px}
.i_box{margin:10px 20px;font-size:14px;float:left}
.i_box *{vertical-align:middle}
.i_box a{padding:2px 5px;background-color:#e9e9e9;border:1px solid #ccc;text-decoration:none;color:#585858;line-height:20px}
.i_box a:hover{color:#000}
.i_box input{width:30px;height:18px;margin:0 8px;padding:2px;border:1px solid #ccc;text-align:center;line-height:16px}
</style>
</head>
<body>
<!--DEMO start-->
<div id="demo">
<div class="i_tips"></div>
 
 <%--这个五个控件，用的时候可以根据具体要求增减--%>    
<div class="i_box"><a href="JavaScript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
</div>
<script>
$.fn.iVaryVal=function(iSet,CallBack){
/*
 * Minus:点击元素--减小
 * Add:点击元素--增加
 * Input:表单元素
 * Min:表单的最小值，非负整数
 * Max:表单的最大值，正整数
 */
iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:0,Max:20},iSet);
var C=null,O=null;
//插件返回值
var $CB={};
//增加
iSet.Add.each(function(i){
$(this).click(function(){
O=parseInt(iSet.Input.eq(i).val());
(O+1<=iSet.Max) || (iSet.Max==null) ? iSet.Input.eq(i).val(O+1) : iSet.Input.eq(i).val(iSet.Max);
//输出当前改变后的值
$CB.val=iSet.Input.eq(i).val();
$CB.index=i;
//回调函数
if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
});
});
//减少
iSet.Minus.each(function(i){
$(this).click(function(){
O=parseInt(iSet.Input.eq(i).val());
O-1<iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O-1);
$CB.val=iSet.Input.eq(i).val();
$CB.index=i;
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
   }
});
});
//手动
iSet.Input.bind({
'click':function(){
O=parseInt($(this).val());
$(this).select();
},
'keyup':function(e){
if($(this).val()!=''){
C=parseInt($(this).val());
//非负整数判断
if(/^[1-9]\d*|0$/.test(C)){
$(this).val(C);
O=C;
}else{
$(this).val(O);
}
}
//键盘控制：上右--加，下左--减
if(e.keyCode==38 || e.keyCode==39){
iSet.Add.eq(iSet.Input.index(this)).click();
}
if(e.keyCode==37 || e.keyCode==40){
iSet.Minus.eq(iSet.Input.index(this)).click();
}
//输出当前改变后的值
$CB.val=$(this).val();
$CB.index=iSet.Input.index(this);
//回调函数
if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
},
'blur':function(){
$(this).trigger('keyup');
if($(this).val()==''){
$(this).val(O);
}
//判断输入值是否超出最大最小值
if(iSet.Max){
if(O>iSet.Max){
$(this).val(iSet.Max);
}
}
if(O<iSet.Min){
$(this).val(iSet.Min);
}
//输出当前改变后的值
$CB.val=$(this).val();
$CB.index=iSet.Input.index(this);
//回调函数
if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
}
});
}
//调用
$( function() {
$('.i_box').iVaryVal({},function(value,index){
//网页显示以下内容，可以隐藏掉
$('.i_tips').html('你点击的表单索引是：'+index+'；改变后的表单值是：'+value);
});
});
</script>
 
 
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>





<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.zhimengzhe.com/" /> 
<title>织梦者</title> 
<style type="text/css">
span{
  color:red;
  cursor:pointer;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("#res").keyup(function(){
    if(isNaN($(this).val())||parseInt($(this).val())<1){
      $(this).val("1");
      $("#totalPrice").html($("#price").val());
      return;
    }
    var total=parseFloat($("#price").val())*parseInt($(this).val());
    $("#totalPrice").html(total.toFixed(2));
  })
    
  $("#add").click(function(){
    numAdd();
  });
    
  $("#del").click(function(){
    numDec();
  });
})
/*商品数量+1*/
function numAdd(){
  var num_add = parseInt($("#res").val())+1;
  if($("#res").val()==""){
    num_add = 1;
  }
  $("#res").val(num_add);
  var total = parseFloat($("#price").val())*parseInt($("#res").val());
  $("#totalPrice").html(total.toFixed(2));
}
/*商品数量-1*/
function numDec(){
  var num_dec = parseInt($("#res").val())-1;
  if(num_dec<1){
    //购买数量必须大于或等于1
    alert("not lt 1");
  }
  else{
    $("#res").val(num_dec);
    var total = parseFloat($("#price").val())*parseInt($("#res").val());
    $("#totalPrice").html(total.toFixed(2));
  }
}
</script>
</head>
<body>
<p class="sdsd">
  价格:<span id="totalPrice">10</span>
</p>
<p>
  数量:<span id="del">-</span> 
  <input type="text" id="res" value="1" />
  <span id="add">+</span>
</p>
<input type="hidden" value="10" id="price" />
</body>
</html>